﻿{% extends "app/layout.html" %}
{% load myfilter %}
{% block style %}
<link rel="stylesheet" href="//cdn.staticfile.org/codemirror/5.48.2/codemirror.min.css">
{% ifequal p.source '洛谷' %}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.10.0-rc.1/katex.min.css">
{% endifequal %}
{% endblock %}

{% block content %}
<div class="page-header">
    <h1>{{ p.title }}
    <small>
        {% for t in tags %}
        <span class="badge badge-info">{{ t.name }}</span>
        {% endfor %}
        <span class="badge badge-default">提交：{{ p.submission_number }}</span>
        <span class="badge badge-success">通过：{{ p.accepted_number }}</span>
        <span class="badge badge-warning">难度：{{ p.difficulty|difficulty_name }}</span>
        <span class="badge badge-error">时限：{{ p.time_limit }}ms</span>
        <span class="badge badge-info">内存：{{ p.memory_limit }}MB</span>
    </small>
    </h1>
</div>
{% autoescape off %}
<div class="row" id="problem_content">
    <div class="panel panel-default">
        <div class="panel-heading"><h3 class="panel-title">题目描述</h3></div>
        <div class="panel-body">{{ p.description }}</div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading"><h3 class="panel-title">输入说明</h3></div>
        <div class="panel-body">{{ p.input_description }}</div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading"><h3 class="panel-title">输出说明</h3></div>
        <div class="panel-body">{{ p.output_description }}</div>
    </div>
    {% for sample in samples %}
    <div class="panel panel-default">
        <div class="panel-heading"><h3 class="panel-title">样例输入</h3></div>
        <div class="panel-body"><pre>{{ sample.input }}</pre></div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading"><h3 class="panel-title">样例输出</h3></div>
        <div class="panel-body"><pre>{{ sample.output }}</pre></div>
    </div>
    {% endfor %}
    <div class="panel panel-default">
        <div class="panel-heading"><h3 class="panel-title">提示</h3></div>
        <div class="panel-body">{{ p.hint }}</div>
    </div>
</div>
{% endautoescape %}
<div class="row">
<div class="panel panel-default">
  <div class="panel-heading"><h3 class="panel-title">代码</h3></div>
  <div class="panel-body">
  <input type="hidden" name="problem_id" id="problem_id" value="{{ p.id }}">
  <div role="form">
{% if submission is None %}
    <textarea class="form-control"  id="code" name="code" rows="28">#include <iostream>
using namespace std;

int main()
{
   cout << "Hello World";
   return 0;
}</textarea>
{% else %}
    <textarea class="form-control"  id="code" name="code" rows="28" style="min-height: 600px">{{ submission.code }}</textarea>
{% endif %}
  <br />
  <div>
      <button id="postsubmission_button" type="button" class="btn btn-default">提交</button>
      <span id="postsubmission_msg"></span>
      <button id="refresh_submission_button" type="button" class="btn btn-default hidden">刷新</button></div>
      <div id="submission_result"></div>
  </div>
  </div>
</div>
</div>


{% comment %}
<div role="form">
  <div class="form-group">
    <label for="code">讨论 <span id="postdiscuss_msg"></span></label><br />
    <textarea name="discuss" id="discuss" class="form-control" rows="16" style="min-width: 90%"></textarea>
  </div>
  <button id="postdiscuss_button" type="button" class="btn btn-default">提交</button>
</div>
{% endcomment %}

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-body">
				正在提交，请稍侯......
			</div>
		</div>
	</div>
</div>
{% endblock %}
{% block scripts %}

<script src="//cdn.staticfile.org/codemirror/5.48.2/codemirror.min.js"></script>
<script src="//cdn.staticfile.org/codemirror/5.48.2/addon/mode/simple.min.js"></script>
<script src="//cdn.staticfile.org/codemirror/5.48.2/mode/clike/clike.js"></script>

<script type="text/javascript">
    var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
	    lineNumbers: true,
	    matchBrackets: true,
	    mode: "text/x-c++src",
	    indentUnit: 4,
	    indentWithTabs: true,
    });
    $(document).ready(function () {
        $("#postsubmission_button").on('click', function () {
            $("#myModal").modal('show');
            $.ajax({
                url: "{% url 'postsubmission' %}",
                data: { problem_id: $("#problem_id").val(), code:editor.getValue() },
                type: "POST",
                dataType: "json",
                success: function (data) {
                    console.log(data);
                    $("#postsubmission_msg").text(data.msg);
                    $("#myModal").modal('hide');
                }
            });
        });

        $("#postdiscuss_button").on('click', function () {
            $("#myModal").modal('show');
            $.ajax({
                url: "{% url 'postdiscuss' %}",
                data: { problem_id: $("#problem_id").val(), content: $("#discuss").val() },
                type: "POST",
                dataType: "json",
                success: function (data) {
                    console.log(data);
                    $("#postdiscuss_msg").text(data.msg);
                    $("#myModal").modal('hide');
                }
            });
        });
    });
</script>
{% endblock %}